<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: huxin
 * @Date: 2023-10-13 11:37:08
 * @LastEditTime: 2023-10-16 19:04:57
-->
<template>
  <div class="TabBar">
    <header>
      <div class="wrapper">
        <nav class="nav">
          <div :class="['navBtn', item.active ? 'active' : '']" v-for="item in navBtnRefs" :key="item.path">
            <RouterLink :to="item.path">
              <div class="navText" @click="active(item.name)"> {{item.name}} </div>
            </RouterLink>
          </div>
        </nav>
      </div>
    </header>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import { RouterLink } from 'vue-router'


const navBtnList = [
  {
    path: '/',
    name: 'home',
    active: true
  },
  {
    path: '/homeView',
    name: 'homeView',
    active: false
  },
  {
    path: '/about',
    name: 'about',
    active: false
  },
  {
    path: '/aboutView',
    name: 'aboutView',
    active: false
  },
]
const navBtnRefs = ref(navBtnList)

const active = (name: string) => {
  for (const item of navBtnRefs.value) {
    item['active'] = (item['name'] == name)
  }
}

</script>
<style scoped>
.wrapper {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.nav {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #c9c9c9;
}

.navBtn {
  width: 25%;
  height: 100%;
  /* border-right: 1px solid #c9c9c9; */
  margin: 0 auto;
  line-height: 100%;
}

.btn {
  width: 100%;
  display: block;
  margin: auto;
  /* font-size: 14px; */
}
.navText{
  color: pink;
  font-size: 20px;
  /* background-color: #fff; */
  text-align: center;
  line-height: 50px;
}
.active{
  background-color: red;
}
</style>